<template>
  <div class="header">
    <div class="left logo">
      <img src="../assets/image/logo.jpg" alt="" />
    </div>
    <div class="middle">
      <Breadcrumb></Breadcrumb>
      <!-- <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/noticeboard' }" @click="onlyHome()"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="current">{{
          current.index
        }}</el-breadcrumb-item>
      </el-breadcrumb> -->
    </div>
    <div class="right user">
      <el-badge :value="666" class="info">
        <el-icon :size="25"><chat-dot-square /></el-icon>
      </el-badge>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :icon="UserFilled" :size="30"></el-avatar>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item disabled>Action 4</el-dropdown-item>
            <el-dropdown-item divided :icon="SwitchButton" @click="logout">
              退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {
  UserFilled,
  ChatDotSquare,
  SwitchButton,
} from "@element-plus/icons";
import { shallowRef } from "vue";
import { mapState } from "vuex";
import Breadcrumb from "@/components/Breadcrumb.vue";
export default {
  data() {
    return {
      UserFilled: shallowRef(UserFilled),
      SwitchButton: shallowRef(SwitchButton),
    };
  },
  components: {
    ChatDotSquare,
    Breadcrumb
  },
  computed: {
    ...mapState({
      current: (state) => state.currentMenu,
    }),
  },
  methods: {
    logout() {
      // debugger
      this.$router.replace("/login");
    },
    onlyHome() {
      this.$store.state.currentMenu = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  line-height: 60px;
  .logo {
    width: 200px;
    height: 60px;
    position: relative;
    img {
      width: 150px;
      height: 45px;
      border-radius: 30px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .middle {
    position: absolute;
    left: 210px;
    top: 40px;
    :deep(.el-breadcrumb__inner) {
      color: darkgoldenrod;
    }
  }
  .user {
    width: 100px;
    height: 60px;
    color: #fff;
    margin-right: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .info {
    margin-top: 20px;
    margin-right: 20px;
  }
}

.el-dropdown-menu__item--divided {
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    margin: 0;
  }
}
</style>
